<template>
    <div class="sub-account">
        <el-dialog v-model="dialogVisible" :show-close="false" width="85%" top="5vh">
            <div class="flex kxx-head">
                <h2>子账号数据预警</h2>
                <div>
                    <el-button type="primary" class="kxx-btn-primary" @click="addition" v-if="route.query.admin"
                        >添加子账号</el-button
                    >
                    <!-- <el-button type="primary" class="kxx-btn-primary">下载模板</el-button> -->
                    <!-- <el-button type="primary" class="kxx-btn-primary"
          >账号关联导入</el-button
        > -->
                    <el-button type="primary" class="kxx-btn-primary" @click="dialogVisible = false">关闭</el-button>
                </div>
            </div>
            <div v-if="orderData.tableData">
                <el-table
                    :data="orderData.tableData"
                    border
                    :header-cell-style="{ 'text-align': 'center' }"
                    v-loading="tableLoading"
                >
                    <el-table-column property="userName" label="子账号" align="center">
                        <template #default="scope">
                            <div style="cursor: pointer" @click="setCurrent(scope.row)" class="user-name">
                                <span>{{ scope.row?.userName }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="姓名" align="center" />
                    <el-table-column property="storeNum" label="门店数" align="center">
                        <template #default="scope">
                            {{ scope.row?.overview?.shopNum }}
                        </template>
                    </el-table-column>
                    <el-table-column property="orderNum" label="订单数" align="center">
                        <template #default="scope">
                            {{ scope.row?.overview?.orderNum }}
                        </template>
                    </el-table-column>
                    <el-table-column property="avgPrice" label="客单价" sortable align="center">
                        <template #default="scope">
                            {{ scope.row?.overview?.avgPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column property="cancelRate" label="取消率" align="center">
                        <template #default="scope">
                            <div>{{ percent(scope.row?.overview?.cancelRate, '-') }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column property="cancelRate" align="center">
                        <template #header>
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="取消率(除急速退款)"
                                placement="top-start"
                            >
                                <span>取消率(除急速退款)</span>
                            </el-tooltip></template
                        >

                        <template #default="scope">
                            <div>
                                {{ percent(scope.row?.overview?.excludeOneMinCancelRate, '-') }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="defectRate" label="缺陷率" align="center">
                        <template #default="scope">
                            <div>{{ percent(scope.row?.overview?.defectRate, '-') }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column property="" label="优秀" align="center">
                        <template #default="scope">
                            <div v-for="item in scope.row?.overview?.levelSummary">
                                <div v-if="item.level == 4">{{ item.count }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="" label="及格" align="center">
                        <template #default="scope">
                            <div v-for="item in scope.row?.overview?.levelSummary">
                                <div v-if="item.level == 3">{{ item.count }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="" label="待提升" align="center">
                        <template #default="scope">
                            <div v-for="item in scope.row?.overview?.levelSummary">
                                <div v-if="item.level == 2">{{ item.count }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="" label="急需提升" align="center">
                        <template #default="scope">
                            <div v-for="item in scope.row?.overview?.levelSummary">
                                <div v-if="item.level == 1">{{ item.count }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="" label="无等级" align="center">
                        <template #default="scope">
                            <div v-for="item in scope.row?.overview?.levelSummary">
                                <div v-if="item.level == 0">{{ item.count }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="" label="30单以上门店占比" width="180" align="center">
                        <template #default="scope">
                            <div>
                                {{ percent(scope.row?.overview?.above30Rate, '-') }}
                                &emsp;
                                <span v-if="scope.row?.overview?.above30Num">
                                    ({{ scope.row?.overview?.above30Num }})
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column property="" label="30单以上门店数" width="180">
                        <template #default="scope">
                            <div>{{ scope.row?.overview?.above30Num }}</div>
                        </template>
                    </el-table-column> -->
                    <!-- v-if="route.query.admin" -->
                    <el-table-column label="操作" width="80" align="center">
                        <template #default="scope">
                            <el-link
                                :underline="false"
                                @click="editAccount(scope.row)"
                                v-hasPermi="['oc:orderAlert:subUser']"
                                >编辑</el-link
                            >
                            <!-- <el-button link type="danger" @click="deletes(scope.row)" class="edit-button"
                                >删除</el-button
                            > -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="pagination_css flex">
      <el-pagination
        v-model:currentPage="orderData.page"
        v-model:page-size="orderData.limit"
        :page-sizes="orderData.pageSizeOptions"
        background
        layout="total, sizes, prev, pager, next"
        :total="orderData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
        </el-dialog>

        <CreateAccount ref="createAccount" @placeAnOrderBtn="obtainData" @close="obtainData" />
        <AddAccount ref="addAccount" @placeAnOrderBtn="obtainData" />
        <ConfirmDialog
            @submit="confirmDeletes"
            @close="isSubAccount = false"
            v-model:visible="isSubAccount"
            title="提示"
            message="确认删除所选账号，删除后无法撤回。"
            cancellation="关闭"
            determine="确认"
        ></ConfirmDialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick, watch } from 'vue'
import CreateAccount from './Edit.vue'
import AddAccount from './addAccount.vue'
import { alertApi } from '@/api/orderAlert'

import { useRoute } from 'vue-router'
import ConfirmDialog from '@/components/ConfirmDialog.vue' // 公共提示弹框
import { ElMessage } from 'element-plus'

const emits = defineEmits(['placeAnOrderBtn', 'update:useridValue'])
const route = useRoute()
const tableLoading = ref(false)
const addAccount = ref()
const isSubAccount = ref(false)

const dialogVisible = ref(false)
/**添加&编辑控制开关 */
const createAccount = ref()
const gridData = []
const orderData = reactive({
    page: 1, // 当前页码
    limit: 10, // 每页显示条数  limit
    tableData: [], //列表数据
    total: 0, //总数
    pageSizeOptions: [10, 20, 30, 100], // 指定每页可以显示多少条
    startTime: 0,
    endTime: 0,
    userId: '', //子账号id
})
//打开子账号管理模态框
function openaccountManage(startTime, endTime) {
    dialogVisible.value = true
    orderData.startTime = startTime
    orderData.endTime = endTime
    obtainData()
}
const percent = function (dec, defaultStr) {
    if (dec == 0 && defaultStr) return defaultStr

    if (dec <= 1) {
        return (dec * 100).toFixed(2) + '%'
    }
    return dec //'Please enter number less than or equal to 1'
}

/**获取子账号数据 */
function obtainData() {
    tableLoading.value = true
    let obj = {
        startDate: orderData.startTime,
        endDate: orderData.endTime,
    }
    alertApi
        .getSubuserList(obj)
        .then(res => {
            if (res.data.code == 0) {
                orderData.tableData = res.data.data.list

                tableLoading.value = false
            }
        })
        .finally(() => {
            tableLoading.value = false
        })
}
/**点击子账号返回主页面 */
const setCurrent = val => {
    const queryParams = `?userId=${val.id}&userName=${val.userName}&startTime=${orderData.startTime}&endTime=${orderData.endTime}`
    window.open(`${queryParams}#/orderAlert`, '_blank')
}

/**编辑子账号 */
function editAccount(row) {
    createAccount.value.modifyorderOpen(row)
}

/**打开 删除子账号  提示框*/
function deletes(row) {
    orderData.userId = row.userId
    isSubAccount.value = true
}
/**确认删除子账号 */
function confirmDeletes() {
    return
    userApi.delChild({ userId: orderData.userId }).then(res => {
        if (res.data.code == 0) {
            ElMessage.success(res.data.message)
            isSubAccount.value = false
            obtainData()
        } else {
            ElMessage.error(res.data.message)
        }
    })
}

/**下载模板 */
function download() {}

/**账号导入 */
function accountImport() {}

/**添加子账号 */
function addition() {
    addAccount.value.openEdit()
}
defineExpose({ openaccountManage })
</script>
<style>
.sub-account .el-dialog__header {
    display: none !important;
}
</style>
<style scoped>
.kxx-head {
    margin-bottom: 20px;
    justify-content: space-between;
}
.pagination_css {
    justify-content: flex-end;
    padding-top: 20px;
}
.user-name {
    cursor: pointer;
    color: #349fc1;
}
.user-name span {
    border-bottom: 1px solid #349fc1;
}
.edit-button {
    width: 50px;
}
</style>
